<template>
  <div>
    <div class="footer">
      <div class="wrapper_1200" style="width: 1300px;">
        <div class="footerTop">
           <div class="footerLeft">
             <div><img src="https://www.pacificshopmall.xyz/uploads/def/20231024/2a942f4b8c56e03dc656595e940ccd3a.jpg" alt=""></div>
             <div style="margin-top: 30px;"><span>{{$t("page.index.Coupons")}}</span></div>
             <div style="margin-top: 10px;">
               <input v-if="types == 'one' || types == 'three' || types == 'four' || types == 'six' || types == 'seven' || types == 'eight' || types == 'nine' || types == 'ten' || types == 'eleven'" placeholder="Your email address"  type="text" name="" id="">
             <input v-if="types == 'two'" placeholder="请输入您的邮箱"  type="text" name="" id="">
             <input v-if="types == 'five'" placeholder="Eメールアドレス"  type="text" name="" id="">
             </div>
             <div class="subscribe">{{$t("page.index.Subscribe")}}</div>
           </div>
           <div class="footerRight">
             <ul class="acea-row row-around row-middle">
               <li class="acea-row row-middle" style="display: flex;flex-wrap: nowrap;">
                 <!-- <div class="picture">
                   <span class="iconfont icon-pinzhong"></span>
                 </div> -->
                 <!-- <div style="color: #fff;">{{ $t("page.index.footer1") }}</div> -->
                 <section class="sectionList" style="margin-top:20px;">
                 	<span class="title" style="width: 100px;
                              white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight:550; font-size:16px;">
                 		{{$t("page.index.Customer")}}
                 	</span>
                 	<ul class="">
                 		<li class="" style="margin-top:30px;"><a href="https://chat.ichatlink.net/widget/standalone.html?eid=c30a6d74560ff67b48209db36075c00e&language=en">{{$t("page.index.Online")}}</a> </li>
                 		<li class=""><a href="https://chat.ichatlink.net/widget/standalone.html?eid=c30a6d74560ff67b48209db36075c00e&language=en">{{$t("page.index.Contact")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Buyer")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Seller")}}</a> </li>
                 	</ul>
                 </section>
               </li>
               <li class="acea-row row-middle">
                 <!-- <div class="picture"><span class="iconfont icon-zhifa"></span></div> -->
                 <!-- <div style="color: #fff;">{{ $t("page.index.footer2") }}</div> -->
                 <section class="sectionList" style="margin-top:20px;">
                 	<div class="title" style="
                              width: 100px;
                              white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
                              font-weight:550; font-size:16px;">
                 		{{$t("page.index.Returns")}}
                 	</div>
                 	<ul class="">
                 		<li class="" style="margin-top:30px;"><a href="#">{{$t("page.index.Policy")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Return")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Delivery")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Seller")}}</a> </li>
                 	</ul>
                 </section>
               </li>
               <li class="acea-row row-middle">
                 <!-- <div class="picture">
                   <span class="iconfont icon-hanghuo"></span>
                 </div> -->
                 <!-- <div style="color: #fff;">{{ $t("page.index.footer3") }}</div> -->
                 <section class="sectionList" style="margin-top:20px;">
                 	<span class="title" style="width: 100px;
                              white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight:550; font-size:16px;">
                 		{{$t("page.index.User")}}
                 	</span>
                 	<ul class="">
                 		<li class="" style="margin-top:30px;"><a href="https://chat.ichatlink.net/widget/standalone.html?eid=c30a6d74560ff67b48209db36075c00e&language=en">{{$t("page.index.Registration")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Order")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Favorite")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Wallet")}}</a> </li>
                 	</ul>
                 </section>
               </li>
               <li class="acea-row row-middle" style="display: flex;flex-wrap: nowrap;">
                 <!-- <div class="picture"><span class="iconfont icon-dijia"></span></div> -->
                 <!-- <div style="color: #fff;">{{ $t("page.index.footer4") }}</div> -->
                 <section class="sectionList" style="margin-top:20px;">
                 	<span class="title" style="width: 100px;
                              white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight:550; font-size:16px;">
                 		{{$t("page.index.Aboutus")}}
                 	</span>
                 	<ul class="">
                 		<li class="" style="margin-top:30px;"><a href="#">{{$t("page.index.Aboutus")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Careers")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.News")}}</a> </li>
                 		<li class=""><a href="#">{{$t("page.index.Modern")}}</a> </li>
                 	</ul>
                 </section>
               </li>
             </ul>
           </div>
        </div>
        <div class="footerBottom">
          <div class="top">
            <div class="left">
              <div class="Payment">
                <span style="font-size: 14px;color: #fff;">{{$t("page.index.Payment")}}</span>
              </div>
              <div class="payment-methods">
                <a href="https://www.binance.com/zh-CN">
                  <div class="pay">
                    <img src="../utils/img/payOne.png" alt="">
                    <span>Binance</span>
                  </div>
                </a>
                <a href="https://www.htx.com/en-us/">
                  <div class="pay">
                    <img src="../utils/img/payTwo.png" alt="">
                    <span>Huobi</span>
                  </div>
                </a>
                <a href="https://www.okx.com/cn">
                  <div class="pay">
                    <img src="../utils/img/payThree.png" alt="">
                    <span>OKX</span>
                  </div>
                </a>
                <a href="https://www.kraken.com/">
                  <div class="pay">
                    <img src="../utils/img/payfive.png" alt="">
                    <span>KraKen</span>
                  </div>
                </a>
                <a href="https://www.coinbase.com/">
                  <div class="pay">
                    <img src="../utils/img/paySix.png" alt="">
                    <span>Coinbase</span>
                  </div>
                </a>
                <a href="https://metamask.io/">
                  <div class="pay">
                    <img src="../utils/img/payseven.png" alt="">
                    <span>MetaMask</span>
                  </div>
                </a>
                <a href="https://www.kucoin.com/restrict?code=CN">
                  <div class="pay">
                    <img src="../utils/img/paynine.png" alt="">
                    <span>KuCoin</span>
                  </div>
                </a>
                <a href="https://www.bitfinex.com/">
                  <div class="pay">
                    <img src="../utils/img/payten.png" alt="">
                    <span>Bitfinex</span>
                  </div>
                </a>
              </div>
            </div>
            <div class="right">
              <div class="title">Inchoi</div>
              <div class="dec">{{$t("page.index.Inchoi")}} </div>
            </div>
          </div>
          <div class="bottom">
            <img src="../utils/img/logoone.png" alt="">
            <img src="../utils/img/logoTwo.png" alt="">
            <img src="../utils/img/logothree.png" alt="">
            <img src="../utils/img/logofore.png" alt="">
            <img src="../utils/img/logofive.png" alt="">
          </div>
        </div>
        <div class="recordNum">
          <div>
            <div>
              <template v-for="(item, index) in companyInfo.copyright">
                <a
                  :href="item.url"
                  class="copyright"
                  v-if="item.url !== '#'"
                  target="_blank"
                >
                  <img v-if="item.img" :src="item.img" alt="" />{{ item.name }}
                </a>
                <span class="copyright" v-else
                  ><img v-if="item.img" :src="item.img" alt="" />{{ item.name
                  }}{{ item.name }}</span
                >
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
export default {
  name: "footers",
  components: {},
  mixins: [],
  data () {
    return {
      companyInfo: {},
      codeUrl: '',
      iScode: false,
      types:'',
    }
  },
  head () {
    return {
      meta: [
        {
          hid: 'keywords', name: 'keywords', content: this.companyInfo.site_keywords
        },
        {
          hid: 'description', name: 'description', content: this.companyInfo.site_description
        },
      ]
    }
  },
  beforeMount () {
    this.getCompanyInfo();
  },
  mounted () {
     this.types = this.$cookies.get("type");
  },
  methods: {
    goTop () {
      (function n () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > 0) {
          window.requestAnimationFrame(n);
          window.scrollTo(0, t - t / 5)
        }
      })()
    },
    goRecommend () {

    },
    wxCode () {
      this.iScode = true
    },
    wxCodeHide () {
      this.iScode = false
    },
    goCart () {
      this.$router.push({ path: '/shopping_cart' });
    },
    getCompanyInfo () {
      this.$axios.get("/api/pc/config").then(res => {
        this.companyInfo = res.data;
        this.$store.commit('logo', res.data.site_logo);
        this.$cookies.set('logo', res.data.site_logo);
        this.$store.commit('titles', res.data.site_name);
        this.$cookies.set('titles', res.data.site_name);
        this.$store.commit('qrCode', res.data.wechat_qrcode);
        this.$store.commit('consumerHotline', res.data.sys_phone);
        this.$cookies.set('consumerHotline', res.data.sys_phone);
        this.$store.commit('domainName', res.data.site_url);
        this.$cookies.set('domainName', res.data.site_url);
      })
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  margin-top: 50px;
  background-color: #212121;

  .footerTop{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #3f3f3f;
    padding-bottom: 50px;
    padding-top:20px;
    padding-left: 40px;
  }
  .footerLeft{
    padding-top:30px;

    span{
      color: #f89900;
      font-size: 13px;
    }
    img{
      width: 80px;
      height: 40px;
    }
    input{
      padding-left: 20px;
      width: 260px;
      height: 40px;
      border-radius:5px;
      border: none;
    }
    input:focus{
      outline: 1px solid #f89900;
    }
    .subscribe{
      width: 156px;
      height: 42px;
      color: #f89900;
      line-height: 42px;
      font-size: 12px;
      text-align: center;
      border: 1px solid #f89900;
      border-radius: 4px;
      cursor: pointer;
      will-change: filter;
      transition: filter 1.3s;
      margin-top: 30px;
      &:hover{
        background-color: #f89900;
        color: #fff;
      }
    }
  }
  .footerRight{
    margin-right: 80px;
    margin-top:20px;
    .acea-row{
      flex-wrap: nowrap!important;
    }
    .title{
      color: #f89900;
    }
    .sectionList{
       margin-left: 60px;
       margin-right: 40px;
      ul{
        li{
          margin-top:30px;
          font-size: 12px;
          font-weight: 300;
          a{
           color: #fff;
           &:hover{
             color: #f89900;
           }
          }
        }
      }
    }
  }
  .footerBottom{
    padding: 20px 40px 30px;
    border-bottom: 1px solid #3f3f3f;
    .top{
     display: flex;
     justify-content: space-between;
    }
    .bottom{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 84px;
      // margin-bottom: 28px;
      img{
        cursor: pointer;
        margin-right: 37px;
        max-height: 28px;
      }
    }
    .payment-methods{
      display: flex;
      width: 348px;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .pay{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 35px;
      width: 42px;
      cursor: pointer;
      img{
        width: 32px;
        height: 32px;
        margin-bottom: 6px;
        margin-top: 15px;
      }
      span{
        font-size: 10px;
        color: #ababab;
      }
    }
    .right{
      margin-left: 58px;
      margin-right: 68px;
      margin-top: 30px;
      .title{
        font-size: 20px;
        font-weight: 500;
        margin: 19px 0 10px 0;
        color: #fff!important;
      }
      .dec{
        text-align: justify;
        word-break: break-all;
        color: #fff;
        font-size: 12px;
      }
    }
  }
  ul {
    height: 104px;
    li {
      .picture {
        width: 40px;
        height: 40px;
        border: 1px solid #707070;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        margin-right: 14px;
        .iconfont {
          font-size: 23px;
          color: #707070;
        }
      }
    }
  }
  .recordNum {
    text-align: center;
    padding: 30px 0 48px 0;
    img {
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 1px;
      position: relative;
      top: 2px;
    }
    .address {
      margin-left: 40px;
    }
    .record {
      margin-top: 6px;
      .num {
        margin-left: 10px;
        &:hover {
          color: #e93323;
        }
      }
    }
  }
  span.copyright {
    cursor: default;
  }
  .copyright {
    color: #999;
    &:after {
      content: "|";
      display: inline-block;
      color: #ccc;
      font-size: 16px;
      margin: 0 10px;
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
}
</style>
